<template>
  <div class="nav-tabs">
    <div class="tabs-container">
      <div @contextmenu.prevent="setNavContextMenu($event, -1)" class="nav-tab">
        <el-button size="small"  @click="$router.push('/dashBoard')" :class="{active: $route.path === '/dashBoard'}">
          <span>首页</span>
        </el-button>
      </div>
      <div class="nav-tab"
        v-for="(tab, index) in $store.state.base.navTabs"
        :key="tab.path"
        @click="$router.push(tab.path)"
        @contextmenu.prevent="setNavContextMenu($event, index)">
        <el-button size="small" :class="{active: tab.path === $route.path}">
            <span>{{tab.name}}</span>
            <i class="el-icon-delete"  @click.stop="delTab(index)"></i>
        </el-button>
      </div>
    </div>
    <div class="nav-menus" v-show="$store.state.base.isShow" :style="{
      position: 'fixed',
      left: $store.state.base.tabLeft + 'px',
      top: $store.state.base.tabTop + 'px'
    }">
      <div class="menu-item">
        刷新
      </div>
      <div class="menu-item" @click="delTab(delIndex)" v-if="showCloseSelf">
        关闭
      </div>
      <div class="menu-item" @click="delOther">
        关闭其他
      </div>
      <div class="menu-item" @click="delAll">
        关闭所有
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showCloseSelf: true,
      delIndex: -1 // 准备删除tab的下标
    }
  },
  methods: {
    delAll () {
      // 删除全部tab  DEL_ALL_TAB
      this.$store.commit('base/DEL_ALL_TAB')
    },
    delOther () {
      // 点击关闭其他
      this.$store.commit('base/DEL_OTHER', this.delIndex)
    },
    delTab (index) {
      // 删除tab
      this.$store.commit('base/DEL_SELF', index)
    },
    setNavContextMenu (e, index) {
      this.delIndex = index
      // 导航按钮 鼠标右键处理
      /*
      显示菜单
      菜单显示的位置为 手指点击的坐标
     */
      if (index === -1) {
        // 点击的是首页这个tab
        this.showCloseSelf = false
      } else {
        this.showCloseSelf = true
      }
      this.$store.commit('base/SET_TAB_MENU_STATE', {
        isShow: true,
        tabLeft: e.clientX,
        tabTop: e.clientY
      })
    }
  },
  mounted () {
    // 点击任意区域关闭 tab菜单
    document.onclick = () => {
      this.$store.commit('base/SET_TAB_MENU_STATE', {
        isShow: false,
        tabLeft: 0,
        tabTop: 0
      })
    }
  },
  beforeDestroy () {
    document.onclick = null
  }
}
</script>

<style lang="scss" scoped>
.nav-tabs{
  height: 60px;
  width: 100%;
  padding:0 20px;
  box-sizing: border-box;
  overflow-x: auto;
  .tabs-container{
    display: flex;
    align-items: center;
    height: 50px;
    .el-button{
      flex-shrink: 0;
      &.active{
        color:#409EFF;
      }
    }
  }
}

.nav-menus{
  position: fixed;
  cursor: pointer;
  z-index:10000;
  font-size: 12px;
  width: 80px;
  height: 120px;
  border-radius: 4px;
  text-align: center;
  background: #fff;
  .menu-item{
    &:hover{
      background-color: rgb(215, 210, 210);
    }
    height: 30px;
    line-height: 30px;
  }
}

.nav-tab{
    margin-right: 5px;
  }
</style>
